<script setup lang="ts">
import dayjs from "dayjs";
import { usePublicHooks } from "@/views/system/hooks";

import { OperationLogDTO } from "@/api/system/log";
const { tagStyle } = usePublicHooks();
/** TODO 有其他方式  来换掉这个props 父子组件传值吗？ */
const props = defineProps<OperationLogDTO>();
</script>

<template>
  <el-descriptions
    direction="horizontal"
    :column="2"
    :labelStyle="'white-space:nowrap;'"
    :contentStyle="'word-break:break-all;'"
    :size="'large'"
  >
    <!-- 开头前两列设置宽度 -->
    <el-descriptions-item label="操作编号:"
      ><el-text>{{ props.id }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="请求模块:"
      ><el-text>{{ props.requestModule }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="操作类型:"
      ><el-text>{{ props.businessTypeStr }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="操作人:"
      ><el-text>{{ props.username }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="操作人ID:"
      ><el-text>{{ props.userId }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="操作人类型:"
      ><el-text>{{ props.operatorTypeStr }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="操作人IP:"
      ><el-text>{{ props.operatorIp }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="操作人地址:"
      ><el-text>{{ props.operatorLocation }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="请求链接:"
      ><el-text>{{ props.requestUrl }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="请求方式:"
      ><el-text>{{ props.requestMethod }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="请求参数:">
      <!-- 长度可能较长的字符串使用el-text包住 避免超出框 -->
      <el-text>
        {{ props.operationParam }}
      </el-text>
    </el-descriptions-item>
    <el-descriptions-item label="调用方法:">
      <el-text>
        {{ props.calledMethod }}
      </el-text>
    </el-descriptions-item>
    <el-descriptions-item label="返回结果:">
      <el-text>
        {{ props.operationResult }}
      </el-text>
    </el-descriptions-item>
    <el-descriptions-item label="错误详情:">
      <el-text>
        {{ props.errorStack }}
      </el-text>
    </el-descriptions-item>

    <el-descriptions-item label="操作时间:"
      ><el-text>{{
        dayjs(props.operationTime).format("YYYY-MM-DD HH:mm:ss")
      }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="请求详情:"
      ><el-text>{{ props.requestDesc }}</el-text></el-descriptions-item
    >
    <el-descriptions-item label="状态:"
      ><el-text>
        <el-tag :style="tagStyle(props.status)">
          {{ props.status === 1 ? "成功" : "失败" }}
        </el-tag></el-text
      >
    </el-descriptions-item>
  </el-descriptions>
</template>
<style>
.el-descriptions {
  margin-top: 20px;
}
.el-text {
  word-wrap: break-word; /* 使长单词或 URL 在需要时换行 */
  word-break: break-all; /* 强制换行，避免长单词或链接溢出 */
}
</style>
